<template lang="html">
  <div class="pages">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100, 200, 500]"
    layout="total, sizes, prev, pager, next, jumper"
    background :total="totalPage"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'pagination',
  props: ['currentPage', 'totalPage'],
  methods: {
    handleSizeChange(e){
      this.$emit('handleSizeChange',e)
    },
    handleCurrentChange(e){
      this.$emit('handleCurrentChange',e)
    }
  }
}
</script>

<style lang="css" scoped>
.pages{
  padding: 20px 0;
  text-align: center;
}
</style>
